<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个jQuery 页面</title>
    <!--引入bootsrap css-->
    <link rel = "stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
     <link rel = "stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
     <link rel = "stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--定义页面样式-->
    <style type="text/css">
      /*body {}background-color:red}*/
        form {color:green}
    </style>
    <!--<meta http-equiv="refresh" content="ajaxdata.json">-->
    <!--引入外部的JS库-->
    <script src="../lib/easyui/jquery.min.js"></script>
    <script  src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<button class="btn btn-default" id="btn1">点这里李鑫变猪</button>
<label>这是一头猪</label>
<button class="btn btn-default bywl" id="btn2">按钮2</button>
<p>第1个P 标签</p>
<p>第2个P 标签</p>
<p class="mypclass" style="color:red;">第3个P 标签</p>
<p>第4个P 标签</p>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三1</td>
        <td>21</td>
        <td>湖南</td>
        <td><button id="btn_1">查看</button></td>
    </tr>
    </tbody>
</table>
<script>
    // 浏览器执行 源码 是从上到下一行行执行       remove hide <tr>
    // 被依赖的先引入
    // css 要求在js 库之前引入
    // bs cs 编程思想是一致，界面表现形式不一样
    // $查找符号
    $(document).ready(function(){
       // $.messager.alert('系统提示','jquery easyui 引入成功'，’warning')
        $('#btn1').on('click',function(e){
            //业务逻辑 指你的代码
            $(this).hide();
            $.messager.alert('系统提示','李鑫变成猪了','info')
        })

        $('.bywl').on('click',function(e){
            //show 是显示节点的方法
            $('#btn1').show();
            //根据标签 选择
            $.messager.alert('label的内容',$('label').text(),'info');

        //根据 变迁和类选择
        $('p.mypclass').click(function(e){
            $.messager.alert('系统提示','你点击了   p.mypclass')
        })
        })



        $('p').on('click',function(e){
            $(this).hide();
        })

        $('button'[id^="btn_"]').on('click',function(e){
            var   idno=$(this).atte('id')
            idno = idno.slice(4)
            alert
    })


/*
    $(function(){
        $.messager.alert('系统提示','jquery 引入成功','warning')
    })
*/
</script>

</body>
</html>